<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔鲜</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
</head>

<body>
    <!-- 顶部导航栏 -->
    <div class="top_nav">
        <div class="w">
            <ul>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">会员中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">在线客服</a></li>
                <li><a href="#">手机版</a></li>
            </ul>
        </div>
    </div>

    <!-- 导航栏 -->
    <div class="header">
        <div class="w">
            <h2 class="pic">
                <a href="#">
                    <img src="./images/logo.png" alt=""></a>
            </h2>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">生鲜</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">餐厨</a></li>
                <li><a href="#">电器</a></li>
                <li><a href="#">居家</a></li>
                <li><a href="#">洗护</a></li>
                <li><a href="#">育婴</a></li>
                <li><a href="#">服饰</a></li>
                <li><a href="#">杂货</a></li>
            </ul>
            <div class="search">
                <span class="sou">
                    <span></span>
                    <input type="text" placeholder="搜一搜">
                </span>
                <i>
                    <span>8</span>
                </i>
            </div>
        </div>


    </div>
    <!-- 中间内容部分 -->
    <div class="w">
        <div class="main">
            <!-- 左侧部分 -->
            <div class="left">
                <!-- 用户信息部分 -->
                <div class="user">
                    <div class="pic">
                        <img src="./uploads/avatar_1.png" alt="">
                    </div>
                    <a class="name"> 张小花</a>
                    <div class="user_vip">
                        <img src="./images/vip_gold.png" alt="">
                        <span>黄金会员</span>
                    </div>
                </div>

                <!-- 我的账户 -->
                <div class="list">
                    <span>我的账户</span>
                    <ul>
                        <li><a href="#">个人中心</a></li>
                        <li><a href="#">消息通知</a></li>
                        <li><a href="#">个人信息</a></li>
                        <li><a href="#">安全设置</a></li>
                        <li><a href="#">地址管理</a></li>
                        <li><a href="#">我的积分</a></li>
                        <li><a href="#">我的足迹</a></li>
                        <li><a href="#">邀请有礼</a></li>
                        <li><a href="#">幸运抽奖</a></li>
                    </ul>
                </div>
                <!-- 交易管理 -->
                <div class="list">
                    <span>交易管理</span>
                    <ul>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">优惠券</a></li>
                        <li><a href="#">礼品卡</a></li>
                        <li><a href="#">评价晒单</a></li>
                        <li><a href="#">售后服务</a></li>
                    </ul>
                </div>
                <!-- 我的收藏 -->
                <div class="list">
                    <span>我的收藏</span>
                    <ul>
                        <li><a href="#">收藏商品</a></li>
                        <li><a href="#">收藏商品</a></li>
                        <li><a href="#">收藏商品</a></li>
                    </ul>
                </div>
                <!-- 帮助中心 -->
                <div class="list">
                    <span>帮助中心</span>
                    <ul>
                        <li><a href="#">帮助中心</a></li>
                        <li><a href="#">在线客服</a></li>
                    </ul>
                </div>
            </div>

            <!-- 右侧部分--会员中心 -->
            <div class="right">
                <div class="vip_center">
                    <!-- 会员中心 -->
                    <span class="box">
                        <ul>
                            <li>
                                <div class="pic">
                                    <img src="./images/vip.png" alt="">
                                </div>
                                <a href="#">会员中心</a>
                            </li>
                            <li>
                                <div class="pic">
                                    <img src="./images/safe.png" alt="">
                                </div>
                                <a href="#">安全设置</a>
                            </li>
                            <li>
                                <div class="pic">
                                    <img src="./images/address.png" alt="">
                                </div>
                                <a href="#">地址管理</a>
                            </li>
                        </ul>
                    </span>
                    <!-- 右侧优惠 -->
                    <span class="box">
                        <ul>
                            <li>
                                <div class="num">6</div>
                                <a href="#">优惠券</a>
                            </li>
                            <li>
                                <div class="num">70</div>
                                <a href="#">礼品卡</a>
                            </li>
                            <li>
                                <div class="num">120</div>
                                <a href="#">积分</a>
                            </li>
                        </ul>
                    </span>
                </div>

                <!-- 我的订单 -->
                <div class="order">
                    <div class="order_nav">
                        <h1>我的订单</h1>
                        <a href="#">查看全部</a>
                    </div>
                    <div class="goods">
                        <!-- polo衫 -->
                        <div class="goods_details">
                            <!-- 商品 -->
                            <div class="shangping">
                                <div class="pic">
                                    <img src="./uploads/order_goods_1.jpg" alt="">
                                </div>
                                <div class="goods_info">
                                    <div class="goods_name">
                                        拉夫劳伦t恤男正品圆领短袖
                                        拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤
                                        男正品圆领短袖拉夫劳伦t恤男正品圆领短袖
                                    </div>
                                    <a href="#">颜色:白色</a>
                                    <a href="#">尺码:M</a>
                                    <a href="#">数量:1</a>
                                </div>
                            </div>

                            <!-- 商品支付状态 -->
                            <div href="#" class="goods_state">
                                待付款
                            </div>
                            <!-- 商品价格 -->
                            <div class="price">
                                <span class="money">￥99.00</span>
                                <div class="add_money">（含运费：¥10.00元）</div>
                                <div class="online_money">在线支付</div>

                            </div>

                            <!-- 商品支付方式 -->
                            <div class="pay">
                                <a href="#">立即支付</a>
                                <a href="#">查看详情</a>
                                <a href="#">取消订单</a>
                            </div>
                        </div>
                        <!-- 李宁鞋子 -->
                        <div class="goods_details">
                            <!-- 商品 -->
                            <div class="shangping">
                                <div class="pic">
                                    <img src="./uploads/order_goods_2.jpg" alt="">
                                </div>
                                <div class="goods_info">
                                    <div class="goods_name">
                                        拉夫劳伦t恤男正品圆领短袖
                                    </div>
                                    <a href="#">颜色:白色</a>
                                    <a href="#">尺码:M</a>
                                    <a href="#">数量:1</a>
                                </div>
                            </div>

                            <!-- 商品支付状态 -->
                            <div href="#" class="goods_state">
                                待付款
                            </div>
                            <!-- 商品价格 -->
                            <div class="price">
                                <span class="money">￥99.00</span>
                                <div class="add_money">（含运费：¥10.00元）</div>
                                <div class="online_money">在线支付</div>

                            </div>

                            <!-- 商品支付方式 -->
                            <div class="pay">
                                <a href="#">立即支付</a>
                                <a href="#">查看详情</a>
                                <a href="#">取消订单</a>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- 收藏商品 -->
                <div class="items">
                    <div class="order_nav">
                        <h1>我的收藏</h1>
                        <a href="#">查看全部</a>
                    </div>
                    <ul>
                        <!-- 商品1 -->
                        <li>
                            <div class="pic">
                                <img src="./uploads/clothes_goods_1.jpg" alt="">
                            </div>
                            <p>
                                人本秋季厚底帆布鞋
                                <br>
                                韩版低帮增高学生
                            </p>
                            <div class="price"> <span>￥</span>55</div>
                        </li>

                        <li>
                            <div class="pic">
                                <img src="./uploads/clothes_goods_2.jpg" alt="">
                            </div>
                            <p>
                                迪士尼真皮针扣表带宽度
                                <br>
                                14-16mm规格双色压纹
                            </p>
                            <div class="price"> <span>￥</span>20.9</div>
                            <div class="dazhe">6折</div>
                        </li>

                        <li>
                            <div class="pic">
                                <img src="./uploads/clothes_goods_3.jpg" alt="">
                            </div>
                            <p>
                                三都港 冷冻无公害黄花鱼
                                <br>
                                700g 2条 袋装
                            </p>
                            <div class="price"> <span>￥</span>209</div>
                        </li>

                        <li>
                            <div class="pic">
                                <img src="./uploads/clothes_goods_4.jpg" alt="">
                            </div>
                            <p>
                                ONLY夏季新款高腰宽松
                                <br>
                                七分阔腿裙裤休闲裤
                            </p>
                            <div class="price"> <span>￥</span>274.5</div>
                        </li>
                    </ul>
                </div>

                <!-- 我的足迹 -->
                <div class="items">
                    <div class="order_nav">
                        <h1>我的足迹</h1>
                        <a href="#">查看全部</a>
                    </div>
                    <ul>
                        <!-- 商品1 -->
                        <li>
                            <div class="pic">
                                <img src="./uploads/clothes_goods_5.jpg" alt="">
                            </div>
                            <p>
                                人本秋季厚底帆布鞋
                                <br>
                                韩版低帮增高学生
                            </p>
                            <div class="price"> <span>￥</span>55</div>
                        </li>

                        <li>
                            <div class="pic">
                                <img src="./uploads/clothes_goods_6.jpg" alt="">
                            </div>
                            <p>
                                迪士尼真皮针扣表带宽度
                                <br>
                                14-16mm规格双色压纹
                            </p>
                            <div class="price"> <span>￥</span>20.9</div>
                            <div class="dazhe">6折</div>
                        </li>

                        <li>
                            <div class="pic">
                                <img src="./uploads/clothes_goods_7.jpg" alt="">
                            </div>
                            <p>
                                三都港 冷冻无公害黄花鱼
                                <br>
                                700g 2条 袋装
                            </p>
                            <div class="price"> <span>￥</span>209</div>
                        </li>

                        <li>
                            <div class="pic">
                                <img src="./uploads/clothes_goods_8.jpg" alt="">
                            </div>
                            <p>
                                ONLY夏季新款高腰宽松
                                <br>
                                七分阔腿裙裤休闲裤
                            </p>
                            <div class="price"> <span>￥</span>274.5</div>
                        </li>
                    </ul>
                </div>

                <div class="items">
                    <div class="order_nav">
                        <h1>我的足迹</h1>
                        <a href="#">查看全部</a>
                    </div>
                    <ul>
                        <!-- 商品1 -->
                        <li>
                            <div class="pic">
                                <img src="./uploads/clothes_goods_7.jpg" alt="">
                            </div>
                            <p>
                                人本秋季厚底帆布鞋
                                <br>
                                韩版低帮增高学生
                            </p>
                            <div class="price"> <span>￥</span>55</div>
                        </li>

                        <li>
                            <div class="pic">
                                <img src="./uploads/clothes_goods_3.jpg" alt="">
                            </div>
                            <p>
                                迪士尼真皮针扣表带宽度
                                <br>
                                14-16mm规格双色压纹
                            </p>
                            <div class="price"> <span>￥</span>20.9</div>
                            <div class="dazhe">6折</div>
                        </li>

                        <li>
                            <div class="pic">
                                <img src="./uploads/clothes_goods_2.jpg" alt="">
                            </div>
                            <p>
                                三都港 冷冻无公害黄花鱼
                                <br>
                                700g 2条 袋装
                            </p>
                            <div class="price"> <span>￥</span>209</div>
                        </li>

                        <li>
                            <div class="pic">
                                <img src="./uploads/clothes_goods_8.jpg" alt="">
                            </div>
                            <p>
                                ONLY夏季新款高腰宽松
                                <br>
                                七分阔腿裙裤休闲裤
                            </p>
                            <div class="price"> <span>￥</span>274.5</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 客户服务 -->
    <div class="bottom_nav">
        <div class="w">
            <ul>
                <!-- 客户服务 -->
                <li>
                    <a>客户服务</a>
                    <div class="box">
                        <a class="left">
                            <i></i>
                            <span>在线客服</span>
                        </a>
                        <a class="right">
                            <i></i>
                            <span>问题反馈</span>
                        </a>
                    </div>
                </li>
                <li>
                    <a>客户服务</a>
                    <div class="box">
                        <a class="left1">
                            <i></i>
                            <span>在线客服</span>
                        </a>
                        <a class="right1">
                            <i></i>
                            <span>问题反馈</span>
                        </a>
                    </div>
                </li>
                <li>
                    <a>下载APP</a>
                    <div class="box">
                        <div class="pic">
                            <img src="./uploads/qrcode.jpg" alt="">
                        </div>
                        <div class="download">
                            <span>扫描二维码
                                <br>
                                立马下载APP
                            </span>
                            <a href="#">下载页面</a>
                        </div>
                    </div>
                </li>
                <li class="call">
                    <a>服务热线</a>
                    <div class="box">
                        <p>400-0000-000</p>
                        <p>周一至周日 8:00-18:00</p>
                    </div>
                </li>
            </ul>

        </div>

    </div>

    <!-- 便民服务 -->
    <div class="service">
        <div class="w">
            <ul>
                <li>
                    <div class="logo">

                    </div>
                    <span>价格亲民</span>
                </li>
                <li>
                    <div class="logo">

                    </div>
                    <span>物流快捷</span>
                </li>
                <li>
                    <div class="logo">

                    </div>
                    <span>品质新鲜</span>
                </li>
            </ul>
        </div>
    </div>

    <div class="footer">
        <div class="w">
            <ul>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">售后服务</a></li>
                <li><a href="#">配送与验收</a></li>
                <li><a href="#">商务合作 </a></li>
                <li><a href="#">搜索推荐</a></li>
                <li><a href="#">友情链接</a></li>
            </ul>
            <p>CopyRight @ 小兔鲜儿</p>
        </div>
    </div>

</body>

</html>